<template>
    <div class="bnh-userlist-container">
        <div class="bnh-user-headBox">
        <input type="text" placeholder="搜索用户">
        <div class="changeBox flex flex-align-center">
            <div class="bnh-change-item flex flex-align-center flex-pack-center ">
               <p>排序</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center ">
               <p>筛选</p>
               <img src="@/assets/img/sanjia.png" alt="">
           </div>
        </div>
        </div><!-- 筛选框结束 -->
        <div style="height:2.14rem"></div>
        <!-- 列表 -->
        <div class="bnh-uesr-list">
                <div v-if='isListShow'>
                        <NullTemp ></NullTemp>
                </div>
                <div class="bnh-user-item flex flex-align-center" v-for='item in dealerList' v-else='isListShow'>
                    <img :src="item.headImg" alt="">
                    <div class="bnh-tips-box">
                        <p class="user-name">{{item.nickName}}</p>
                        <p class="user-date">电话：{{item.phone}}</p>
                        <p class="user-date" style='margin-top:-0.2rem'>成为服务商时间：{{item.registerTime}}</p>
                    </div>
                    <div class="bnh-money-box">
                        <p class="cont">0.00</p>
                        <p class="cont-tips">收益(元)</p>
                    </div>
           </div>
        </div><!-- 列表结束 -->
        <NavBottom></NavBottom>
    </div>
</template>
<script>
import NavBottom from '../components/NavBottom'
import NullTemp from '../components/Null'
import http from '../utils/http'
import api from '../utils/api'
import utils from '../utils/utils'
export default {
    created(){ //页面初始化时修改网页标题
			window.document.title = '服务商';
            this.$store.state.Index = 3;
            this.findDealerList();
   },
   data(){
       return{
           dealerList:[], //列表数据
           isListShow:false, //判断初次加载有无数据
       }
   },
  components:{
      NavBottom,
      NullTemp
  },
  methods:{
      findDealerList: async function(){
          let params = { id: localStorage.id}
          const res = await http.get(api.findDealerList, params);
          	if (res.data.success) {
                if(res.data.bnhDealerListVO.length == 0){
                    this.isListShow = true;
                }else{
                    this.dealerList = res.data.bnhDealerListVO;
                }
			 }else{
              this.$vux.toast.text(res.data.message, 'middle');
            }
      }
  }
}
</script>
<style scoped>
.bnh-userlist-container{background: #f5f5f5;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
.bnh-user-headBox{min-height: 2.14rem;background: #fff;position: fixed;width: 100%;top: 0;left: 0;z-index: 2}
.bnh-user-headBox input{height: 0.73rem;width: 6.34rem;background: #eeeeee;text-align: center;border:none;border-radius: 7px;margin-top: 0.4rem;margin-left: 0.6rem;color: #858585;}
.changeBox{height: 0.74rem;margin-top: 0.2rem;padding-left: 0.9rem;}
.bnh-change-item{height: 0.74rem;width: 2.84rem;}
.bnh-change-item img{height: 0.13rem;width: auto;margin-bottom: -2px;margin-left: 5px}
.active{color: #ffaf3c}
.bnh-user-item{height: 1.8rem;background: #fff;margin-top: 0.18rem}
.bnh-user-item img{height: 1.14rem;width: auto;margin-left: 0.26rem}
.bnh-tips-box{height: 1.14rem;width: 4rem;margin-left: 0.3rem;}
.user-name{font-size: 0.28rem;font-weight: 600;}
.user-date{font-size: 0.24rem;line-height: 0.3rem;color: #6c6c6c}
.bnh-money-box{height: 1.14rem;width: 1.8rem;text-align: center;color: #f17421}
.cont{font-size: 0.36rem}
.cont-tips{font-size: 0.24rem;line-height: 0.1rem;}
</style>


